<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>购房资质</title>
    <style>
      body {
        margin: 0;
        padding: 2rem;
        font-size: 1rem;
      }
      .tab {
        display: flex;
      }

      h2 {
        cursor: pointer;
        margin-right: 10px;
      }

      .current {
        color: red;
      }

      .item {
        margin-bottom: 10px;
      }

      .label {
        margin-bottom: 1rem;
      }

      select {
        width: 100%;
        padding: 1rem;
        box-sizing: border-box;
      }

      span {
        padding-left: 5px;
      }

      .button {
        padding: 1rem;
        margin-top: 2rem;
        background-color: #f03131;
        color: #ffffff;
        text-align: center;
        border-radius: 5px;
        cursor: pointer;
      }

      .konws {
        padding: 1rem 0;
        width: 30%;
        margin: auto;
        font-size: 14px;
        background-color: #747070;
        color: #ffffff;
        text-align: center;
        cursor: pointer;
        margin-top: 20px;
      }

      .zongjia,
      .jijin,
      .zonge {
        display: none;
      }

      .mode {
        width: 100%;
        height: 100vh;
        background: #000;
        opacity: 0.4;
        position: absolute;
        top: 0;
        left: 0;
      }

      .notes {
        padding: 1rem;
        position: absolute;
        background: #fff;
        right: 1rem;
        left: 1rem;
        top: 20%;
      }

      .result {
        margin: 10px 0;
      }

      .content {
        font-size: 16px;
        font-weight: bold;
        padding: 15px;
        background: #fff0e0;
        border-radius: 5px;
        color: #ff000b;
      }

      .tip_title {
        font-weight: 700;
        color: #747070;
        margin-top: 10px;
      }
      .hide {
        display: none !important;
      }
      .red {
        color: red;
      }
      .total_cost {
        display: flex;
      }
      .tip_info {
        color: #747070;
        margin-bottom: 5px;
        font-size: 14px;
      }
      .message {
        position: absolute;
        top: 200px;
        left: 45%;
        color: #fff;
        background: #000;
        opacity: 0.4;
        padding: 10px;
        border-radius: 5px;
      }
      #results {
        display: none;
        position: absolute;
        left: 2rem;
        right: 2rem;
        top: 2rem;
        border: 1px solid #ffd7a8;
        padding: 1.5rem;
        border-radius: 5px;
        background: #fff8f0;
        box-shadow: 0 0 60px #999;
      }
      .close {
        position: absolute;
        right: 1rem;
        top: 1rem;
      }
      .close2 {
        display: block;
        width: 20%;
        margin: 2rem auto 0;
        padding: 1rem;
        background: #f03131;
        border-radius: 5px;
        color: #ffffff;
        text-align: center;
      }
    </style>
  </head>

  <body>
    <h1>购房资质</h1>

    <div id="selects">
      <div id="main"></div>
      <div class="mode hide"></div>
      <div id="notes" class="notes hide">
        <div id="note"></div>
        <div class="konws" onclick="closeN()">知道了</div>
      </div>
      <div class="button">提交</div>
    </div>

    <div id="results">
      <h2 class="result">购房资质测试结果</h2>
      <span class="close">关闭</span>
      <div id="content" class="content">暂无数据</div>
      <div class="totalCost">
        <div class="tip_title">注释：</div>
        <div class="tip_wrap">
          <div class="tip_info">
            1、以上购房资格测算仅供参考，以不动产中心登记核定为准
          </div>
          <div class="tip_info">
            2、外地人购房资格测算结果，以其具有购房资格为前提，本人可持“近3年社保记录“到不动产登记部门咨询。
          </div>
          <div class="tip_info">3、购买滨海新区房屋均不限购</div>
        </div>
      </div>
      <span class="close2">关闭</span>
    </div>
    <div class="message hide">您还没有选择信息</div>
    <script src="js/jquery-3.5.1.js"></script>
    <script>
      var baseUrl = "https://rhtm.jfzh.com.cn/",
        url1 = "mini/question/list",
        url2 = "mini/question/getOptionQuestion",
        url3 = "mini/answer/optionSubmit",
        questionList = [],
        answer = [],
        id = "",
        questionId = "",
        isShowResult = false,
        resultList = [],
        customerId = ""; // getApp().globalData.openId

      getList();
      $(".close,.close2").click(function () {
        $("#results").hide();
        $('select').val('')
      });
      // 问题列表
      function getList() {
        var data = {
            type: "house_purchase",
          },
          div = "",
          select = '<option value="">请选择</option>';
        ajaxs(baseUrl + url1, data, "GET", function (response) {
          var res = JSON.parse(response);
          if (res.code == 200) {
            questionList = res.data;
            div = pinSelect(questionList[0], questionList[0].id);
            $("#main").append(div);
          }
        });
      }
      function changehu(obj, id) {
        let index = obj.selectedIndex - 1;
        let ele = "";
        questionList.forEach((el) => {
          if (el.id == id) {
            ele = el;
          }
        });
        answer.forEach((el, i) => {
          if (id == el.id) {
            answer.splice(i, 1);
          }
        });
        if (ele.optionList[index].isEnd == "0") {
          getOptionQuestion(obj.value, id);
        } else {
          questionList.forEach((el, i) => {
            if (questionId == el.pid) {
              questionList.splice(i, 1);
            }
          });
          answer.push({
            id: id,
            oid: obj.value,
          });
        }
      }
      function note(val) {
        $("#note").text(val);
        $("#notes").removeClass("hide");
        $(".mode").removeClass("hide");
      }
      function closeN() {
        $("#notes").addClass("hide");
        $(".mode").addClass("hide");
      }
      function message() {
        $(".message").addClass("hide");
      }
      $(".button").click(function () {
        let data = {
          customerId: customerId,
          type: "house_purchase",
        };
        if (answer.length < 1) {
          //还没有选择消息
          $(".message").removeClass("hide");
          setTimeout("message()", 2000);

          return;
        }

        let newArr = [];
        questionList.forEach((el) => {
          el.optionList.forEach((item) => {
            newArr.push(item);
          });
        });
        let resList = [];
        answer.forEach((item) => {
          let isHave = newArr.find(function (el) {
            return item.oid == el.id;
          });
          if (isHave) {
            resList.push(item.oid);
          }
        });
        data.optionIds = resList;
        ajaxs(baseUrl + url3, data, "POST", function (response) {
          var res = JSON.parse(response);
          if (res.code == 200) {
            (resultList = res.data.conclusionResultItemLists),
              (isShowResult = true);
            $("#results").removeClass("hide");
            // $('#selects').addClass("hide")
            if (resultList && resultList.length) {
              resultList.forEach((el) => {
                $("#content").html("<div>" + el.conclusion + "</div>");
              });
            }
          }
        });
        $("#results").show();
      });
      function getOptionQuestion(id, itemId) {
        let data = {
          oid: id,
        };
        ajaxs(baseUrl + url2, data, "GET", function (response) {
          var res = JSON.parse(response);
          if (res.code == 200) {
            let result = res.data;
            if (result && result.length >= 1) {
              let nextId = "";
              let _index = "";
              questionList.forEach((item, index) => {
                if (item.id == itemId) {
                  nextId = item.nextId;
                  _index = index;
                  if (nextId) {
                    questionList.forEach((el, i) => {
                      if (el.id == nextId) {
                        questionList.splice(_index + 1, i - _index - 1);
                      }
                    });
                  } else {
                    questionList.map((ite, i) => {
                      if (i >= _index + 1) {
                        $("#" + ite.id).remove();
                      }
                    });
                    questionList.splice(_index + 1, questionList.length - 1);
                  }
                  result.forEach((el, i) => {
                    if (result[i + 1]) {
                      el.nextId = result[i + 1].id;
                    } else {
                      if (questionList[index + 1 + i]) {
                        el.nextId = questionList[index + 1 + i].id;
                      } else {
                        el.nextId = "";
                      }
                    }
                    questionList.splice(index + i + 1, 0, result[i]);
                    let div = pinSelect(result[i], result[i].id);
                    $("#main").append(div);
                  });
                }
              });
            }
          }
        });
      }

      function pinSelect(item, id) {
        let title = item.title,
          list = item.optionList,
          div = "",
          select = '<option value="">请选择</option>';
        list.map((ite) => {
          select += `<option value="${ite.id}">${ite.title}</option>`;
        });
        if (item.note) {
          if (item.note.indexOf("\n") != -1) {
            item.note = item.note.replace(/[\n]/g, "");
          }
          div =
            `<div class="item" id="${item.id}">
                   <div class="label">${title}` +
            "<label class='red' onclick='note(\"" +
            item.note +
            "\")'> 注</label>" +
            `</div><select id="${id}" onchange="changehu(this,id)">${select}</select></div>`;
        } else {
          div = `<div class="item" id="${item.id}">
                   <div class="label">${title} </div>
                   <select id="${id}" onchange="changehu(this,id)">${select}</select></div>`;
        }

        return div;
      }

      function ajaxs(url, data, methods, callback) {
        var xhr = new XMLHttpRequest();
        if (methods == "get" || methods == "GET") {
          if (data) {
            url += "?";
            for (var i in data) {
              url += i + "=" + data[i] + "&";
            }
            url = url.substring(0, url.length - 1);
          }
          xhr.open(methods, url);
          xhr.send();
        } else {
          xhr.open("POST", url, true);
          xhr.setRequestHeader("Content-type", "application/json");
          xhr.send(JSON.stringify(data));
        }
        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4 && xhr.status == 200) {
            callback(xhr.responseText);
          }
        };
      }
    </script>
  </body>
</html>
